<template>
	<view class="drawer-wrapper" :class="show ? 'show' : ''">
		<div class="overlay" @click="overlayHideHandler"></div>
		<div :class="contentShow ? 'content show' : 'content'" :style="'height:' + (height ? height : '80%')">
			<div class="header">
				<span v-show="cancle" @click="hide">取消</span>
				<p>{{title || ''}}</p>
				<span v-show="confirm" @click="this.$emit('confirm');">{{confirm}}</span>
			</div>
			<div class="center">
				<slot></slot>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props: ["title", "height", "confirm", "cancle", "overlayHide"],
		data() {
			return {
				show: false,
				contentShow: false
			};
		},
		methods: {
			open() {
				this.show = true;
				setTimeout(()=> {
					this.contentShow = true
				}, 200)
			},
			hide(){
				this.contentShow = false;
				setTimeout(()=> {
					this.show = false;
				}, 200)
			},
			overlayHideHandler() {
				if(!this.overlayHide) return;
				this.contentShow = false;
				setTimeout(()=> {
					this.show = false;
				}, 200)
			}
		}
	}
</script>
<style scoped>
	.drawer-wrapper {
		height: 100%;
		width: 100%;
		/* background-color: rgba(0,0,0,0.3); */
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		overflow: hidden;
		z-index: 10;
	}
	.drawer-wrapper.show {
		display: block;
	}
	
	.overlay {
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
	}
	
	
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		background-color: #ffffff;
		border-radius: 32rpx 32rpx 0px 0px;
		
		width: 100%;
		position: absolute;
		bottom: 0;
		transform: translateY(100%);
		transition: 0.2s;
	}
	.content.show {
		transform: translateY(0);
	}
	
	.header {
		width: 100%;
		height: 100rpx;
		flex-shrink: 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #eeeeee;
	}
	
	.header>p {
		font-size: 28rpx;
		color: #333333;
	}
	.header>span:first-child {
		position: absolute;
		left: 40rpx;
		font-size: 24rpx;
		color: #999999;
	}
	.header>span:last-child {
		position: absolute;
		right: 40rpx;
		font-size: 24rpx;
		color: #0973f7;
	}
	
	.center {
		width: 100%;
		flex-grow: 1;
		overflow: auto;
	}
</style>